<template>
  <div class="todo-list">
    <ul>
      <TodoItem 
        v-for="task in tasks" 
        :key="task.id" 
        :task="task" 
        @delete="deleteTask" 
      />
    </ul>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import TodoItem from './TodoItem.vue';

const props = defineProps({
  tasks: {
    type: Array,
    required: true
  }
});

const emits = defineEmits(['deleteTask']);

const deleteTask = (id) => {
  emits('deleteTask', id);
};
</script>

<style scoped>
.todo-list {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
}
</style>